<template>
  <div class="login_body">
    <div class="bg" />
    <div class="box">
      <div class="title">广西科技大学附属医院</div>
      <el-form ref="form" :model="form" :rules="rules">
        <!-- prop：要校验的字段名，指定rules中的规则 -->
        <!-- 用户名（非空） 银行卡号（非空固定16位）  不要记住我  密码（>6位非空校验） 显示存款 -->
        <el-form-item label="账号" prop="username">
          <el-input v-model="form.username" />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" />
        </el-form-item>

        <el-form-item prop="remember">
          <el-checkbox v-model="flag">记住我</el-checkbox>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="login_btn" @click="login()">登录</el-button>
        </el-form-item>
      </el-form>
      <router-link style="font-size: smaller;" :to="{ path: '/register' }">没有账号？立即注册!</router-link>
    </div>
  </div>
</template>

<script>
import { loginAPI } from '@/api/user'
import router from '@/router/index'

export default {
  name: 'Login',
  data() {
    return {
      flag: false,
      form: {
        username: '',
        password: ''
        // remember: 'false'
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码至少应6位', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    // console.log("first")
    const temp = localStorage.getItem('form')

    if (temp) {
      this.form.username = JSON.parse(temp).username
      this.form.password = JSON.parse(temp).password
      this.flag = true
    }


    
  },
  methods: {
    login() {

      if(!this.flag){
        localStorage.removeItem("form")
      }
      // this.$refs.名字 => 拿到组件 => 调用组件的方法validate
      this.$refs.form.validate((valid) => {
        if (valid) {
          loginAPI(this.form).then((res) => {
            console.log(res.data)
            if (res.data) {
              this.$store.commit('user/setToken', res.data.token)
              if (this.flag) {
                localStorage.setItem('form', JSON.stringify(this.form))
              }


              if (res.data.role === 0) { //病人跳转
                localStorage.setItem('routesToRemove', 'doctor,clerk,admin,user');
                this.$router.push('/patient')
                this.$message.success('用户登陆成功')
              } else if (res.data.role === 1) {  //医生跳转
                localStorage.setItem('routesToRemove', 'patient,clerk,admin,user');
                this.$router.push('/doctor')
                this.$message.success('医生登陆成功')
              }else if(res.data.role === 2){ //收费员跳转
                localStorage.setItem('routesToRemove', 'patient,doctor,admin,user');
                this.$router.push('/clerk')
                this.$message.success('收费员登陆成功')
              }else if(res.data.role === 3){
                localStorage.setItem('routesToRemove', 'clerk,patient,doctor');
                this.$router.push('/admin')
                this.$message.success('管理员登陆成功')
              }
              else{
                this.$message.error("出现未知错误")
              }
            } else {
              this.$message.error('账号或者密码错误，请重试')

            }

          }

          )
        }
      })


    }
  }
}
</script>

<style scoped lang="scss">
.login_body {
  display: flex;
}

.bg {
  width: 60vw;
  height: 100vh;
  background: url("~@/assets/login.jpg") no-repeat;
  background-position: right top;
  background-size: cover;
}

.box {
  margin: 200px 10% 0;
  flex: 1;

  .title {
    padding-bottom: 76px;
    font-size: 26px;
    font-weight: 500;
    color: #1e2023;
  }

  ::v-deep() {
    .ant-form-item {
      display: flex;
      margin-bottom: 62px;
      flex-direction: column;
    }

    .ant-form-item-label label {
      font-size: 16px;
      color: #8b929d;
    }

    .ant-input,
    .ant-input-password {
      border-radius: 8px;
    }
  }
}

.login_btn {
  width: 100%;
}
</style>
